<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .text1{
            width: 50px;
            height: 50px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="text" id="box">123</div>
</body>
</html>

<script>
//Element对象对应网页的HTML元素。每一个HTML元素，在DOM树上都会转化成为一个Element节点对象（一下称为元素节点）
//Element.id 属性返回指定元素id 属性，该属性可读写
var box = document.getElementById('box')
box.id = 'box1'
console.log(box.id)
console.log(box)
//Element.className 属性用来读写当前元素节点的class属性。它的值是一个字符串，每个class之间用空格隔开。
box.className = 'text text1'
//Element.classList 对象有下列方法
// add() 添加一个class
box.classList.add('mybox')
// remove() 删除一个class
 box.classList.remove('text1')
// contains() 判断一个class是否存在
 console.log(box.classList.contains('mybox'))
// toggle() 将某个class添加或删除 如果存在就删除，不存在就添加

//Element.innerHTML 属性返回一个字符串，等同于该元素包含的所有HTML代码，该属性可读写，常用来设置某个节点的
//内容。它能改写所有元素节点的内容，包括<HTML>和<body>元素。
box.innerHTML = 'YANG'

// Element.innerText innerText和innerHTML类似，不同的是 innerText无法识别元素，会直接渲染成字符串
box.innerText = '小杨'


// 区别
var str = '<a href="http://www.baidu.com">百度</a>'
box.innerHTML = str//跳转链接
box.innerText = str//字符串
</script>